import { useRef, useState } from "react";
import { PageContainer } from "@ant-design/pro-layout";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchLessonDeliveryList, addLessonDelivery } from "@/api/student";
import { ProFormDigit, ProFormTextArea } from "@ant-design/pro-form";
import { Button, Row, Col } from "antd";
import { history, useLocation } from "umi";
import { ArrowLeftOutlined } from "@ant-design/icons";

export default () => {
  const actionRef = useRef();
  const { studentId } = useLocation().query;

  const columns = [
    {
      title: "赠送课时",
      dataIndex: "classHour",
      width: 150,
      search: false,
    },
  ];
  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <Row gutter={20}>
          <Col span={12}>
            <ProFormDigit
              width="lg"
              label="赠送课时"
              name="classHour"
              placeholder="请输入课时"
              min={0}
              max={100}
              fieldProps={{
                precision: 1,
              }}
              rules={[{ required: true, message: "请输入课时" }]}
            />
          </Col>
          <Col span={12}>
            <ProFormTextArea
              width="lg"
              fieldProps={{
                rows: 5,
              }}
              name="remark"
              label="备注"
              placeholder="请输入备注"
            />
          </Col>
        </Row>
      </>
    );
  };
  return (
    <PageContainer
      extra={
        <Button onClick={() => history.goBack()}>
          <ArrowLeftOutlined />
          返回
        </Button>
      }
    >
      {useCommonTable({
        actionRef,
        title: "送课时",
        renderFormItem,
        columns,
        modalWidth: "50%",
        fetchList: async (params) => {
          const res = await fetchLessonDeliveryList({
            ...params,
            studentId,
          });
          return res;
        },
        addOtherParams: {
          studentId,
        },
        add: addLessonDelivery,
        renderShowEdit: () => {
          return false;
        },
        actionColumnWidth: 300,
        showCheckbox: false,
        hiddenAction: true,
      })}
    </PageContainer>
  );
};
